<template>

    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">流程引擎</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>流程节点配置</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 查询区域 -->
    <div style="border: solid 1px #ccc ; padding: 20px; margin: 12px; min-width: 300px;">
        <!-- forminline 行内表单 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="节点名称">
                <el-input v-model="formInline.NodeName" placeholder="请输入据节点名称" clearable />
            </el-form-item>


            <el-form-item label="选择行业">
                <el-select @change="getCategorys()" v-model="formInline.IndustryId" placeholder="请选择所属行业"
                    style="width: 200px;">
                    <el-option v-for="item in industrys" :label="item.industryName" :value="item.id" />
                </el-select>
            </el-form-item>


            <el-form-item label="流程类别">
                <el-select @change="getForms()" v-model="formInline.CategoryCode" placeholder="请选择流程类别"
                    style="width: 200px;">
                    <el-option v-for="item in categorys" :label="item.formCategoryName"
                        :value="item.formCategoryCode" />
                </el-select>
            </el-form-item>

            <el-form-item label="流程表单">
                <el-select @change="" v-model="formInline.FormId" placeholder="请选择流程表单" style="width: 200px;" clearable>
                    <el-option v-for="item in forms" :label="item.formName" :value="item.id" />
                </el-select>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="success" @click="toConfig()">流程节点配置</el-button>
            </el-form-item>
        </el-form>

    </div>

    <div style="border: 1px solid #ccc; padding: 20px;margin: 12px; min-width: 500px;">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="80" />
            <el-table-column prop="formId" label="表单id" width="150" />
            <el-table-column prop="formName" label="所属表单" width="150" />
            <el-table-column prop="currentNodeId" label="节点id" width="150" />
            <el-table-column prop="nodeName" label="节点名称" width="200" />
            <el-table-column prop="accountName" label="处理人" width="150" />
        </el-table>

        <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
            :page-sizes="[2, 4, 6, 8]" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />

    </div>


    <!-- 流程配置节点的弹窗 -->
    <el-dialog title="流转设置" v-model="configFormNodeDialog" width="1150">
        <!-- {{ cfgtableData }} -->

        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="行业名称">
                <el-select @change="getCategorys()" v-model="formInline.IndustryId" placeholder="请选择所属行业"
                    style="width: 200px;">
                    <el-option v-for="item in industrys" :label="item.industryName" :value="item.id" />
                </el-select>
            </el-form-item>


            <el-form-item label="流程类别">
                <el-select @change="getForms()" v-model="formInline.CategoryCode" placeholder="请选择流程类别"
                    style="width: 200px;">
                    <el-option v-for="item in categorys" :label="item.formCategoryName"
                        :value="item.formCategoryCode" />
                </el-select>
            </el-form-item>

            <el-form-item label="流程表单">
                <el-select @change="getNodes()" v-model="formInline.FormId" placeholder="请选择流程表单" style="width: 200px;"
                    clearable>
                    <el-option v-for="item in forms" :label="item.formName" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>

        <el-button type="success" size="small" @click="addCfgData()">
            新增配置
        </el-button>
        <el-table :data="cfgtableData" style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="80" />
            <el-table-column prop="name" label="当前节点" width="200">
                <template #default="scope">
                    <el-select @change="" v-model="scope.row.currentNodeId" placeholder="请选择当前节点" style="width: 170px;"
                        clearable>
                        <el-option v-for="item in nodes" :label="item.nodeName" :value="item.id" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="操作人员" width="260">
                <template #default="scope">
                    <el-input v-model="scope.row.accountName" style="width: 200px"></el-input>
                    <el-button type="success" size="small" @click="openAccountDialog(scope.row)">
                        +
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="city" label="上级节点" width="200">
                <template #default="scope">
                    <el-select @change="" v-model="scope.row.prevNode" placeholder="请选择当前节点" style="width: 170px;"
                        clearable>
                        <el-option v-for="item in nodes" :label="item.nodeName" :value="item.id" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="city" label="下级节点" width="200">
                <template #default="scope">
                    <el-select @change="" v-model="scope.row.nextNode" placeholder="请选择当前节点" style="width: 170px;"
                        clearable>
                        <el-option v-for="item in nodes" :label="item.nodeName" :value="item.id" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="150">
                <template #default="scope">
                    <el-button link type="danger" size="small" @click="removeCfgData(scope.$index)">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="configFormNodeDialog = false">取消</el-button>
                <el-button type="primary" @click="saveCfgData">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 选择操作人会话框 -->
    <el-dialog title="选择操作人" v-model="accountDialog" width="500">
        {{ departmentId }}-{{ accountName }}
         <el-form-item label="请选择部门">
        <el-cascader @change="getAccounts" v-model="departmentId" :options="departmentTrees" :props="props" clearable /> <!-- 复制 -->
            </el-form-item>
            <el-form-item label="选择负责人">
                 <el-select   v-model="accountName" placeholder="请选择负责人" style="width: 220px;"
                        clearable>
                        <el-option v-for="item in accounts" :label="item.accountName" :value="item.accountName" />
                    </el-select>
            </el-form-item>

              <template #footer>
            <div class="dialog-footer">
                <el-button @click="accountDialog = false">取消</el-button>
                <el-button type="primary" @click="saveAccount()">
                    保存操作人
                </el-button>
            </div>
        </template>



    </el-dialog>


</template>

<script lang="ts" setup>
import myAxios from '@/http/axiosHelper';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue'

const page = reactive({
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0
})

watch(page, () => {
    search()
})

const formInline = reactive({
    FormId: null,
    NodeName: '',
    IndustryId: null, //查询列表的时候用不到
    CategoryCode: ''//查询列表的时候用不到,用于3级联动
})



const tableData = ref([])
//查询流程节点配置
const search = () => {
    myAxios.get('/PERead/NodeCfg/GetNodeCfgs', {
        params: {
            PageIndex: page.PageIndex,
            PageSize: page.PageSize,
            FormId: formInline.FormId,
            NodeName: formInline.NodeName
        }
    }).then(res => {
        tableData.value = res.data.pageDatas
        page.totalCount = res.data.totalCount
    })
}

const industrys = ref([])
const getIndustrys = () => {

    myAxios.get('/PERead/ProcessEngine/GetIndustry').then(res => {
        industrys.value = res.data.data
    })
    formInline.IndustryId = null
}


const categorys = ref([{
    "id": 700061378039813,
    "formCategoryName": "邻里纠纷问题",
    "formCategoryCode": "T0001",
    "industryId": 3,
    "industryName": "教育"
}])
const getCategorys = () => {

    myAxios.get('/PERead/ProcessEngine/SearchFormCategory', { params: { IndustryId: formInline.IndustryId } }).then(res => {
        categorys.value = res.data.data
    })
    formInline.CategoryCode = ''
}


const forms = ref([{
    "id": 702835120816133,
    "formCode": "F00009",
    "formName": "学生请假流程(物联网学院)"
}])

const getForms = () => {

    myAxios.get('/PERead/ProcessEngine/GetFormPages', { params: { CategoryCode: formInline.CategoryCode } }).then(res => {
        forms.value = res.data.pageDatas
    })
    formInline.FormId = null
}

//流程配置节点

const configFormNodeDialog = ref(false)

const toConfig = () => {
    //检查一下,是否选择了表单
    configFormNodeDialog.value = true;

}

//节点配置的数据源
const cfgtableData = ref(<any>[])
const removeCfgData = (index: any) => {//移除一条配置
    cfgtableData.value.splice(index, 1)
}
const addCfgData = () => {//新增一行
    cfgtableData.value.push({
        "formId": formInline.FormId,
        "currentNodeId": null,
        "prevNode": null,
        "nextNode": null,
        "accountId": null,
        "accountName": "",
        "realName": "",
        "departmentName": "",
        "roleName": ""
    });
}

const saveCfgData = () => {
    if (!formInline.FormId) {
        ElMessage.warning("请先选择流程表单");
        return;
    }
    myAxios.post('/PEWrite/NodeCfg/CreateFormNodeCfg', {
        "formId": formInline.FormId,
        "createNodeCfgDtos": cfgtableData.value
    }).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
            // cfgtableData.value = false;


        }
    })

}


//定义节点数组集合变量
const nodes = ref([{
    "id": 702487374098437,
    "nodeCode": "N0004",
    "nodeName": "流程结束节点",
    "nodeDes": "流程表单通用的节点"
}])

//表单下拉框选择数据发生变化时,做两件事:1.加载(纯)节点 2.加载选择的流程的配置信息(cfgtableData)
const getNodes = () => {//1.加载(纯)节点 
    myAxios.get("http://localhost:5189/api/Node/GetNodes?PageIndex=1&PageSize=10000000", { params: { FormId: formInline.FormId } }).then(res => {
        nodes.value = res.data.pageDatas
    })

    myAxios.get('/PERead/NodeCfg/GetNodeCfgs', {
        params: {
            PageIndex: 1,
            PageSize: 1000000,
            FormId: formInline.FormId
        }
    }).then(res => {
        cfgtableData.value = res.data.pageDatas

    })
}


//选择操作人
const accountDialog = ref(false)
const currentCfg =ref()
const openAccountDialog = (row: any) => {//打开某一行的操作人
    accountDialog.value = true;
    currentCfg.value=row 
}

const departmentTrees = ref([])
const getDepartmentTrees = () => {
    myAxios.get('/BasicData/Department/GetDepartmentTree').then(res => {
        departmentTrees.value = res.data.data
    })
}
const props = {
    label: 'departmentName',
    value: 'id',
    children: 'children',
    checkStrictly: true,
    emitPath: false
}
const departmentId = ref(0)//选中的部门
const accountName=ref('')//选中的操作人
//根据部门id查找用户列表
const accounts = ref([{
      "accountName": "yinhuang",
      "id": 1
    }])
const getAccounts =()=>{//根据部门id查待选操作人列表
      myAxios.get('/BasicData/Account/GetDeptAccounts',{params:{DepartmentId:departmentId.value}}).then(res => {
        accounts.value = res.data.data
    })
}
const saveAccount=()=>{//保存操作人
  currentCfg.value.accountName = accountName.value
}

onMounted(() => {
    search();
    getIndustrys();
    getCategorys();
    getForms();
    getNodes();
    getDepartmentTrees();
})



</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>